<template lang="jade">
div.return-bar
  i.iconfont(@click="back()") &#xe668;
  div.limitedname 忘记密码
div.uc-edit-pwd.detail_top

  validator(name="validation1")

      ul
        li
          label
            span 手机号
            input(v-model="username",placeholder="请输入您的手机号码",v-validate:username="{required:true, maxLength: 10}",maxLength="11")
        li
          label
            span 新密码
            input(v-show=" !showPWD ", v-model="password",type="password",placeholder="输入新密码",v-validate:password="{required:true}")
            input(v-show=" showPWD ", v-model="password",type="text",placeholder="输入新密码",v-validate:password="{required:true}")
            i.iconfont.icon-eyesclose(@click="switchKw()") {{{iconString}}}
        li
          label
            span 确认密码
            input(v-model="repassword",type="password",placeholder="确认新密码",v-validate:repassword="{required:true}")

        li
          label
            span 图形验证码
            input(v-model="verify",placeholder="请输入图形验证码",v-validate:code="{required:true, maxLength: 4}",maxLength="4")
            img.verify(v-show="show_img", src="{{img_src}}", @click="reloadImg")


        li
          label
            span 验证码
            input(v-model="code",placeholder="输入验证码",v-validate:code="{required:true, maxLength: 4}",maxLength="4")
          button(v-bind:class="timecls", @click="setCode()") {{timemsg}}
      div.postIt
        button(type="button", @click="update()") 确认
</template>

<script>
import '../../assets/sass/user/esitpwd.scss'
import {c_reg_verify_img,Api_BackPwd, Api_BackPwd_Code} from '../../config/api'

var time_ment = null;
export default {

  data () {
    return {
      verify:'',
      img_src:'',
      show_img:true,
      showCode: false,
      code:'',
      username:'',
      password: '',
      repassword: '',
      busy:false,
      showPWD:false,
      iconString:'&#xe712;',
      timecls:'',
      timemsg:'获取验证码',
      timer: 60,       //默认倒数30秒
      stop : false,   //默认是停止的，但界面加载之后会变成false
      Interval:null  //setInterval的对象
    }
  },

  methods: {
    /*setCode: function (next) {
      this.showCode = true;
    },*/

    reloadImg(){
      /*this.$http({url: c_img_verify, method: 'GET'}).then(function (response) {
        this.img_src = c_img_verify;
      });*/
      clearInterval(time_ment);
      this.show_img = false;
      this.img_src = '';
      var that = this;
      var timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000;
      var rkey = that.global.r_key()
      var pkey = that.global.p_key()
      //this.img_src = c_img_verify
      time_ment = setInterval(function(){
        that.show_img = true;
        that.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
      },300);

    },

    updateSec () {

        if(this.timer <= 0)
        {
            //this.timer = 10;
            this.timecls='';
            this.stop = false;
            this.timemsg = "获取验证码";
        }
        else{
          	this.timecls='gray';
            this.timer--;
            this.timemsg = '剩余'+this.timer+'秒';
        }

    },


    startTimer () {
        //如果是false就开始倒计时，如果是true就停止倒计时
        clearInterval(this.Interval);
        //console.log(this.stop)
        this.timer = 60;
        if(this.stop == false)
        {
            this.Interval = setInterval(this.updateSec,1000);
        }
        else
        {
            clearInterval(this.Interval);
        }

        this.stop = !this.stop;
    },

    switchKw(){
      if(this.iconString == '&#xe712;')
        this.iconString = '&#xe648;'
      else
        this.iconString = '&#xe712;'
      this.showPWD = !this.showPWD;
    },

    back(){
      window.history.back();
    },

    update:function(){
  		if (this.$validation1.invalid || this.busy) {
  			return false;
  		}
  		if(this.password != this.repassword){
  			alert('两次密码输入不一致！')
  			return false;
  		}

  		this.busy = true, this.$store.dispatch('setShowLoading', true);
  		var data = {'verify':this.verify, 'phone': this.username,'code':this.code,'password':this.password,'confirm_password':this.repassword}
  		this.$http.post(Api_BackPwd, data,'').then(function (response) {
  		  var rs = response.data;
  		  this.busy = false, this.$store.dispatch('setShowLoading', false);
  		  if(rs.status){
  		  	alert(rs.msg)
  		    this.$router.go('/login')
  		  }else{
  		  	alert(rs.msg)
  		  }
  		});

    },


    setCode: function () {
      if(this.stop || this.busy) {
        return false;
      }
      if(!this.username){
        alert('请输入您的手机号！')
        return false;
      }
      this.busy = true, this.$store.dispatch('setShowLoading', true);
      var data = {'phone': this.username, 'verify': this.verify}
      this.$http.post(Api_BackPwd_Code, data,'').then(function (response) {
          var rs = response.data;
          this.$store.dispatch('setShowLoading', false);
          alert(rs.msg)
          this.busy = false;
          if(rs.status){
            this.startTimer();
          }
          else{
            this.reloadImg();
            this.verify='';
          }
      });
    },


  },
  route: {
    activate ( transition ) {

      var timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000;

      var rkey = this.global.r_key()
      var pkey = this.global.p_key()

      //this.img_src = c_reg_verify_img+'&t='+timestamp
      this.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;


      transition.next();
      this.global.loading = true;
    }
  }
}
</script>
